<script setup lang="tsx">
import { ref } from 'vue'
import { Descriptions, DescriptionsSchema } from '@/components/Descriptions'
import { useI18n } from 'vue-i18n'
import { ElTag } from 'element-plus'
import { getUserDetailApi } from '@/api/personal-center'
import { UserDetailData } from '@/api/personal-center/types'

const props = defineProps({
  currentId: {
    type: Number
  }
})

const { t } = useI18n()

const currentRow = ref<UserDetailData>()

const renderTag = (enable?: boolean) => {
  return (
    <ElTag type={enable ? 'success' : 'danger'}>
      {enable ? t('common.enable') : t('common.disable')}
    </ElTag>
  )
}

const detailSchema = ref<DescriptionsSchema[]>([
  {
    field: 'username',
    label: t('personalCenter.username')
  },
  {
    field: 'name',
    label: t('personalCenter.name')
  },
  {
    field: 'phone',
    label: t('personalCenter.phone')
  },
  {
    field: 'email',
    label: t('personalCenter.email')
  },
  {
    field: 'lastLoginIp',
    label: t('personalCenter.lastLoginIp')
  },
  {
    field: 'lastLoginTime',
    label: t('personalCenter.lastLoginTime')
  },
  {
    field: 'departmentName',
    label: t('department.parentDeptName')
  },
  {
    field: 'status',
    label: t('common.status'),
    slots: {
      default: (data: any) => {
        return renderTag(data.status)
      }
    }
  },
  {
    field: 'createdAt',
    label: t('common.createTime')
  },
  {
    field: 'updatedAt',
    label: t('common.updateTime')
  },
  {
    field: 'roles',
    label: t('personalCenter.role'),
    span: 24,
    slots: {
      default: (data: any) => {
        return (
          data?.roles?.map?.(({ code, name }) => (
            <ElTag key={code} class="mr-2px">
              {name}
            </ElTag>
          )) ?? null
        )
      }
    }
  },
  {
    field: 'remark',
    label: t('common.remark'),
    span: 24
  }
])

const getUserDetail = async () => {
  if (!props.currentId) return
  const response = await getUserDetailApi(props.currentId)
  currentRow.value = response.data
}
getUserDetail()
</script>

<template>
  <Descriptions :schema="detailSchema" :data="currentRow || {}" />
</template>
